<template>
	<div class="subject_answer">
		<template v-if="type === '5'">
			<sw-tiny-editor v-model="answerString" type="question"></sw-tiny-editor>
		</template>
		<template v-else-if="type === '3'">
			<el-radio-group class="subject_answer_estimate" v-model="answerString" v-removeAriaHidden:radio>
				<el-radio label="1">正确</el-radio>
				<el-radio label="2">错误</el-radio>
			</el-radio-group>
		</template>
		<template v-else>
			<div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddedOption()">{{ buttonName }}</el-button>
				<p v-if="type !== '4'">点击按钮增加新的选项，并选择{{ optionTips }}答案</p>
			</div>
			<template v-if="type === '1' && answerOptions.length > 0">
				<el-radio-group class="subject_answer_option" v-model="answerString" v-removeAriaHidden:radio>
					<div class="item" v-for="(item, index) in answerOptions" :key="index">
						<template v-if="index + 1 === answerOptions.length">
							<el-button class="close" type="text" icon="el-icon-circle-close" @click="handleDeleteOption(index)" />
						</template>
						<el-radio class="option" :label="item.tag">选项{{ item.tag }}</el-radio>
						<sw-tiny-editor v-model="item.contents" type="question"></sw-tiny-editor>
					</div>
				</el-radio-group>
			</template>
			<template v-if="type === '2' && answerOptions.length > 0">
				<el-checkbox-group class="subject_answer_option" v-model="answerString" v-removeAriaHidden:checkbox>
					<div class="item" v-for="(item, index) in answerOptions" :key="index">
						<template v-if="index + 1 === answerOptions.length">
							<el-button class="close" type="text" icon="el-icon-circle-close" @click="handleDeleteOption(index)" />
						</template>
						<el-checkbox class="option" :label="item.tag">选项{{ item.tag }}</el-checkbox>
						<sw-tiny-editor v-model="item.contents" type="question"></sw-tiny-editor>
					</div>
				</el-checkbox-group>
			</template>
			<div v-if="type === '4' && answerString.length > 0" class="subject_answer_option">
				<div class="item" v-for="(item, index) in answerString" :key="index">
					<el-button class="close" type="text" icon="el-icon-circle-close" @click="handleDeleteOption(index, item.key)" />
					<div class="option">空格{{ item.key }}</div>
					<sw-tiny-editor v-model="item.value" type="question"></sw-tiny-editor>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import lodash from 'lodash';
export default {
	props: {
		type: { type: String, default: '' },
		value: { type: String, default: '' },
		options: { type: Array, default: () => [] }
	},
	data() {
		return {
			answer: this.value,
			answerString: null,
			answerOptions: []
		};
	},
	computed: {
		buttonName() {
			return this.type === '4' ? '添加空格' : '添加选项';
		},
		optionTips() {
			return this.type === '1' ? '其中一个作为单选' : this.type === '2' ? '多个选项作为多选' : '';
		}
	},
	watch: {
		value(val) {
			this.answer = val;
		},
		answer(val) {
			this.$emit('input', val);
		},
		type: {
			handler(val) {
				this.initializeAnswer();
			},
			immediate: true
		},
		answerString: {
			handler(data) {
				this.answer = JSON.stringify(data);
			},
			deep: true
		}
	},
	methods: {
		initializeAnswer() {
			this.answerString = null;
			if (['1', '2'].includes(this.type)) {
				if (this.options.length === 0) {
					this.answerOptions = Array.from({ length: 4 }, (n, i) => {
						let tag = String.fromCharCode(65 + i);
						return { tag, contents: '' };
					});
				} else {
					this.answerOptions = this.options;
				}
			}
			if (this.type === '2' || this.type === '4') {
				this.answerString = this.answer.isJSON() ? JSON.parse(this.answer) : [];
			} else {
				this.answerString = this.answer || '';
			}
		},

		//添加选项
		handleAddedOption() {
			if (this.type === '4') {
				let options = this.answerString;
				let keyData = lodash.maxBy(options, (n) => Number(n.key));
				let option = { key: Number(keyData?.key || '0') + 1, content: '' };
				this.$set(this.answerString, options.length, option);
				this.$bus.$emit('addedSubjectBlank', option.key);
			} else {
				let len = this.answerOptions.length;
				let tag = String.fromCharCode(65 + len);
				this.$set(this.answerOptions, len, { tag, contents: '' });
			}
		},

		//删除选项
		handleDeleteOption(index, key) {
			if (this.type === '4') {
				this.answerString.splice(index, 1);
				this.$bus.$emit('deleteSubjectBlank', key);
			} else {
				this.answerOptions.splice(index, 1);
			}
		},

		//删除空格
		handleDeleteBlank(key) {
			let index = this.answerString.findIndex((n) => {
				return Number(n.key) === Number(key);
			});
			this.answerString.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.subject_answer {
	.button {
		display: flex;
		align-items: center;
		height: 36px;
		p {
			margin-left: 10px;
			color: #f00;
		}
	}
}
.subject_answer_estimate {
	display: flex;
	align-items: center;
	height: 36px;
}
.subject_answer_option,
.subject_answer_blanks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 16px;
	margin-top: 16px;
	.item {
		border-radius: 4px;
		border: solid 1px #ebeef5;
		background-color: #f2f6fc;
		&:has(.is-checked) {
			border-color: var(--primary-active);
			background-color: var(--primary-background-plain);
		}
	}
	.el-button.close {
		float: right;
		font-size: 20px;
		margin-right: 10px;
		padding: 6px 0;
	}
	.option {
		display: flex;
		padding: 10px;
		margin: 0;
		line-height: 1;
		font-weight: bold;
	}
	.sw_tinymce_editor {
		border-radius: 0;
		border-color: transparent;
		border-top-color: #ebeef5;
	}
	::v-deep .el-textarea__inner {
		padding: 8px 12px;
		border: none;
	}
}
</style>
